<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <el-container>
        <el-container>
          <el-main>
            <el-row style="margin-bottom:20px;">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">运行监控</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/operationmonitoring/runcontroller' }">
                  <font color="#A1FEDB" size="4">运行控制</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <font color="#A1FEDB" size="4">状态安全分析</font>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-row>
            <el-row>
              <div id="allmap">
                <el-button :class="this.form.data1 == true ? 'pccswitch' : 'pccswitch2'">并网运行</el-button>
                <el-row>
                  <div :class="this.states.data5 == true ? 'boxx' : 'box'">
                    <el-row>
                      E:
                      <el-image class="ball" :src="require('@/assets/images/绿球.jpg')" :fit="fit"></el-image>能满足全部负荷需求
                    </el-row>
                    <el-row>
                      C:
                      <el-image class="ball" :src="require('@/assets/images/绿球.jpg')" :fit="fit"></el-image>无电压和潮流越限
                    </el-row>
                    <el-row>
                      R:
                      <el-image class="ball" :src="require('@/assets/images/绿球.jpg')" :fit="fit"></el-image>能承受预想故障冲击
                    </el-row>
                  </div>
                </el-row>
                <el-row>
                  <div :class="this.states.data1 == true ? 'box22' : 'box2'">
                    <el-row>
                      E:
                      <el-image class="ball" :src="require('@/assets/images/红球.jpg')" :fit="fit"></el-image>不能满足全部负荷需求
                    </el-row>
                    <el-row>
                      C:
                      <el-image class="ball" :src="require('@/assets/images/绿球.jpg')" :fit="fit"></el-image>无电压和潮流越限
                    </el-row>
                    <el-row>
                      R:
                      <el-image class="ball" :src="require('@/assets/images/绿球.jpg')" :fit="fit"></el-image>能承受预想故障冲击
                    </el-row>
                  </div>

                  <div class="box3">
                    <el-row>
                      <el-col :span="8">负荷需求</el-col>
                      <el-col :span="8">运行约束</el-col>
                      <el-col :span="8">可靠性约束</el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="8">
                        <div :class="this.states.data6 == false ? 'box77' : 'box7'"></div>
                        <!-- <el-image
                        style="width: 30px; height: 50px;margin-left:10px;margin-right:10px;"
                        :src="require('@/assets/images/柱状图.jpg')"
                        :fit="fit"
                        ></el-image>-->
                      </el-col>
                      <el-col :span="8">
                        <div :class="this.states.data7 == false ? 'box88' : 'box8'"></div>
                        <!-- <el-image
                        style="width: 30px; height: 50px;margin-left:10px;margin-right:10px;"
                        :src="require('@/assets/images/柱状图.jpg')"
                        :fit="fit"
                        ></el-image>-->
                      </el-col>
                      <el-col :span="8">
                        <div :class="this.states.data8 == false ? 'box99' : 'box9'"></div>
                        <!-- <el-image
                        style="width: 30px; height: 50px;margin-left:10px;margin-right:10px;"
                        :src="require('@/assets/images/柱状图.jpg')"
                        :fit="fit"
                        ></el-image>-->
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">E</el-col>
                      <el-col :span="8">C</el-col>
                      <el-col :span="8">R</el-col>
                    </el-row>
                  </div>

                  <div :class="this.states.data2 == true ? 'box44' : 'box4'">
                    <el-row>
                      E:
                      <el-image class="ball" :src="require('@/assets/images/绿球.jpg')" :fit="fit"></el-image>能满足全部负荷需求
                    </el-row>
                    <el-row>
                      C:
                      <el-image class="ball" :src="require('@/assets/images/绿球.jpg')" :fit="fit"></el-image>无电压和潮流越限
                    </el-row>
                    <el-row>
                      R:
                      <el-image class="ball" :src="require('@/assets/images/红球.jpg')" :fit="fit"></el-image>不能承受预想故障冲击
                    </el-row>
                  </div>
                </el-row>
                <el-row>
                  <div :class="this.states.data3 == true ? 'box55' : 'box5'">
                    <el-row>
                      E:
                      <el-image class="ball" :src="require('@/assets/images/红球.jpg')" :fit="fit"></el-image>不能满足全部负荷需求
                    </el-row>
                    <el-row>
                      C:
                      <el-image class="ball" :src="require('@/assets/images/红球.jpg')" :fit="fit"></el-image>无电压和潮流越限
                    </el-row>
                    <el-row>
                      R:
                      <el-image class="ball" :src="require('@/assets/images/红球.jpg')" :fit="fit"></el-image>不能承受预想故障冲击
                    </el-row>
                  </div>
                  <div :class="this.states.data4 == true ? 'box66' : 'box6'">
                    <el-row>
                      E:
                      <el-image class="ball" :src="require('@/assets/images/绿球.jpg')" :fit="fit"></el-image>能满足全部负荷需求
                    </el-row>
                    <el-row>
                      C:
                      <el-image class="ball" :src="require('@/assets/images/红球.jpg')" :fit="fit"></el-image>电压和潮流已经越限
                    </el-row>
                    <el-row>
                      R:
                      <el-image class="ball" :src="require('@/assets/images/红球.jpg')" :fit="fit"></el-image>不能承受预想故障冲击
                    </el-row>
                  </div>
                </el-row>
                <!-- <el-row>
                <el-table
                  id="printJS-form"
                  :data="tableData"
                  style="width: 100%"
                  :row-style="getRowClass"
                  :header-row-style="getRowClass"
                  :header-cell-style="getRowClass2"
                  @cell-mouse-enter="changerow"
                >
                  <el-table-column prop="name1" label="负荷名称" width="180">
                  </el-table-column>
                  <el-table-column prop="name2" label="负荷分类" width="180">
                  </el-table-column>
                  <el-table-column prop="name2" label="负荷编号" width="180">
                  </el-table-column>
                  <el-table-column prop="name3" label="负荷影响程度">
                  </el-table-column>
                </el-table>
                </el-row>-->
              </div>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'

export default {
  data() {
    return {
      reportZoom: 'FitPage',
      tableData: [
        {
          name1: '电灯',
          name2: '普通负荷',
          name3: '1',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '空调',
          name2: '大功率负荷',
          name3: '6',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '工厂机床',
          name2: '大功率负荷',
          name3: '3',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '洗衣机',
          name2: '普通负荷',
          name3: '9',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        }
      ],
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      },
      form: {
        data1: '',
        data2: '',
        data3: '',
        data4: ''
      },
      //
      states: {
        data1: false,
        data2: false,
        data3: false,
        data4: false,
        data5: false,
        data6: false,
        data7: false,
        data8: false
      },
      labelPosition: 'right',
      formLabelAlign: {
        name: '0.00w',
        region: '0.00kw',
        type: '0.00s',
        type2: '0.00s'
      }
    }
  },
  components: {
    CanvasProps,
    CanvasContextMenu,
    Index,
    Bottom
  },
  computed: {},
  watch: {},
  created() {},

  mounted() {
    this.getinfo()
  },

  methods: {
    controller() {},
    getinfo() {
      this.$axios({
        headers: {
          Authorization: ' ',
          'content-Type': 'application/json;charset=UTF-8'
          //  Accept: 'application/json;charset=UTF-8'
        },
        method: 'get',
        url: 'http://127.0.0.1:8082/run/searchpccstate'
      }).then(res => {
        this.form.data1 = res.data[0]
        this.form.data2 = res.data[1]
        this.form.data3 = res.data[2]
        this.form.data4 = res.data[3]
        this.states.data6 = res.data[1]
        this.states.data7 = res.data[2]
        this.states.data8 = res.data[3]

        if (res.data[1] == true && res.data[2] == true && res.data[3] == true) {
          this.states.data5 = true
        } else if (
          res.data[1] == false &&
          res.data[2] == true &&
          res.data[3] == true
        ) {
          this.states.data1 = true
        } else if (
          res.data[1] == false &&
          res.data[2] == false &&
          res.data[3] == false
        ) {
          this.states.data3 = true
        } else if (
          res.data[1] == true &&
          res.data[2] == false &&
          res.data[3] == false
        ) {
          this.states.data4 = true
        } else if (
          res.data[1] == true &&
          res.data[2] == true &&
          res.data[3] == false
        ) {
          this.states.data2 = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
//并网运行状态为，红色
.pccswitch {
  width: 12rem;
  height: 4rem;
  color: #fff;
  border: 0px;
  background-color: #e50e2b;
  position: absolute;
  left: 19%;
  top: 20px;
  z-index: 1;
}
//并网断开状态为绿色
.pccswitch2 {
  width: 12rem;
  height: 4rem;
  color: #fff;
  border: 0px;
  background-color: #0ee551;
  position: absolute;
  left: 19%;
  top: 20px;
  z-index: 1;
}
.box {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: white;
  border-radius: 20px;
  background-color: #e5e5e5;
  margin-left: 398px;
  margin-top: 10px;
  padding-bottom: 12px;
}
.boxx {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: white;
  border-radius: 20px;
  background-color: #0ee551;
  margin-left: 398px;
  margin-top: 10px;
  padding-bottom: 12px;
}
.box2 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 20px;
  background-color: #e5e5e5;
  margin-left: 2px;
  margin-top: 53px;
  padding-bottom: 12px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box22 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 20px;
  background-color: #0ee551;
  margin-left: 2px;
  margin-top: 53px;
  padding-bottom: 12px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box3 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 10px;
  background-color: #e5e5e5;
  margin-left: 65px;
  margin-top: 60px;
  padding-top: 10px;
  padding-bottom: 28px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box33 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 10px;
  background-color: #0ee551;
  margin-left: 65px;
  margin-top: 60px;
  padding-top: 10px;
  padding-bottom: 28px;
  //让DIV并排显示
  display: inline;
  float: left;
}

.box4 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 20px;
  background-color: #e5e5e5;
  margin-left: 90px;
  margin-top: 45px;
  padding-bottom: 12px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box44 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 20px;
  background-color: #0ee551;
  margin-left: 90px;
  margin-top: 45px;
  padding-bottom: 12px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box5 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 20px;
  background-color: #e5e5e5;
  margin-left: 140px;
  margin-top: 45px;
  padding-bottom: 12px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box55 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 20px;
  background-color: #0ee551;
  margin-left: 140px;
  margin-top: 45px;
  padding-bottom: 12px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box6 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 20px;
  background-color: #e5e5e5;
  margin-left: 130px;
  margin-top: 45px;
  padding-bottom: 12px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box66 {
  width: 300px;
  height: 100px;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-color: #d9ff00;
  border-radius: 20px;
  background-color: #0ee551;
  margin-left: 130px;
  margin-top: 45px;
  padding-bottom: 12px;
  //让DIV并排显示
  display: inline;
  float: left;
}
.box7 {
  width: 30px;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #0ee551;
}
.box77 {
  width: 30px;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #e50e27;
}
.box8 {
  width: 30px;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #0ee551;
}
.box88 {
  width: 30px;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #e50e27;
}
.box9 {
  width: 30px;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #0ee551;
}
.box99 {
  width: 30px;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #e50e27;
}
#topology-canvas {
  width: 100%;
  height: 700px;
  background-color: #9af2f3;
  border-radius: 20px;
}
.page {
  display: flex;
  width: 100%;
  height: 100%;
}
.el-form-item__label {
  color: white;
}
#table1 {
  width: 330px;
  height: 320px;
  background-color: white;
}

#table2 {
  width: 330px;
  height: 320px;
  background-color: white;
}

#table3 {
  width: 330px;
  height: 320px;
  background-color: white;
}
#table4 {
  width: 400px;
  height: 300px;
  background-color: '#005A5B';
  color: 'white';
}
#allmap {
  margin-left: 300px;
  height: 700px;
  color: white;
  margin-top: 100px;
  padding-left: 50px;
  padding-right: 50px;
  background-image: url(../../assets/images/图片1.png);
  background-repeat: no-repeat; /* 不进行平铺 */
}

.body {
  width: 100%;

  margin-top: 0px;
  // background-image: url(../assets/images/background.jpg);
  // background-color: rgb(0, 101, 105);
  background-color: #005b5c;
  background-image: url(../../assets/images/新UI12.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ball {
  width: 18px;
  height: 18px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
}
.el-row {
  margin: 10px;
  padding: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  margin: 0px;
  padding: 0px;
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bm-view {
  width: 100%;
  height: 800px;
}
.aside {
  margin-left: 20px;
  margin-top: 20px;
  height: 560px;
}
.el-header {
  // background-color: #373d41;
  // display: flex;
  align-items: center;
}

// .el-aside{
//     background-color: #373d41;
// }
// .el-main{
//     background-color: #EAEDF1;
// }
</style>
